<template>
  <basic-container>
    <el-row style="margin-bottom: 20px">
      <el-button size="small" @click="returnlast()">返回</el-button>
      <el-button
        v-if="showSubmit"
        size="small"
        :loading="buttonLoading"
        type="primary"
        @click="submit()"
        >提交</el-button
      >
    </el-row>

    <el-descriptions class="margin-top" title="询价单信息" :column="2" border>
      <el-descriptions-item>
        <template slot="label"> 标题 </template>
        {{ form.title }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 发货企业 </template>
        {{ form.shippingEnterprise }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 发货地址 </template>
        {{ form.shippingAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 到货企业 </template>
        {{ form.arrivalEnterprise }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 到货地址 </template>
        {{ form.arrivalAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 运输方式 </template>
        {{ form.shippingType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 产品名称 </template>
        {{ form.cpmc }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 净重 </template>
        {{ form.netWeight }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 工业/电子 </template>
        {{ form.industry }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 危化品/普货 </template>
        {{ form.goodsType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 运费类型 </template>
        {{ form.freightType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 交付/询价要求 </template>
        {{ form.delivery }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 询价响应截止时间 </template>
        <!-- {{ form.endTime }} -->
        <el-date-picker
          :disabled="
            form.quoteStatus === 'finish' ||
            !vaildData(permission.tms_inquiry_modification_time, false)
          "
          v-model="form.endTime"
          :clearable="false"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="timeChange"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 询价有效期 </template>
        <!-- {{ form.effectiveTime }} -->
        <el-date-picker
          :disabled="
            form.quoteStatus === 'finish' ||
            !vaildData(permission.tms_inquiry_modification_time, false)
          "
          v-model="form.effectiveTime"
          :clearable="false"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="timeChange"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 询价备注 </template>
        {{ form.remark }}
      </el-descriptions-item>
      <el-descriptions-item v-if="form.annex">
        <template slot="label"> 附件 </template>
        <div v-for="url in form.annex.split(',')" :key="url">
          <el-link
            :href="url"
            type="primary"
            target="_blank"
            icon="el-icon-download"
            >{{ url }}</el-link
          >
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <h4>报价信息</h4>
    <el-divider></el-divider>
    <avue-crud
      ref="crud"
      :table-loading="loading"
      v-model="form"
      :data="data"
      :option="option"
      :permission="getpermission"
      @row-save="rowSave"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="tableonLoad"
    >
      <template slot="menu" slot-scope="{ row }">
        <el-button
          type="text"
          icon="el-icon-delete"
          v-if="getpermission('closeBtn', row)"
          size="small"
          @click="closelist(row)"
          tip="管理员"
          >关闭</el-button
        >
        <el-button
          type="text"
          icon="el-icon-edit"
          size="small"
          v-if="getpermission('modifyBtn', row)"
          @click="adminmodifyquotation(row)"
          tip="管理员"
          >修改报价</el-button
        >
        <el-button
          type="text"
          icon="el-icon-finished"
          size="small"
          v-if="getpermission('confirmBtn', row)"
          @click="confirmwin(row)"
          tip="管理员"
          >确认中标</el-button
        >
        <el-button
          type="text"
          icon="el-icon-date"
          size="small"
          v-if="getpermission('historicalBtn', row)"
          @click="historicalquotation(row)"
          tip="管理员"
          >历史议价</el-button
        >
        <el-button
          type="text"
          icon="el-icon-coordinate"
          size="small"
          v-if="getpermission('getofferBtn', row)"
          @click="modifyquotation(row)"
          >报价</el-button
        >
        <el-button
          type="text"
          icon="el-icon-date"
          size="small"
          v-if="getpermission('historicalofferBtn', row)"
          @click="historicalquotation(row)"
          >历史议价</el-button
        >
      </template>
    </avue-crud>
    <el-divider></el-divider>
    <bulkmodifyQuotation
      :modifyData="modifyData"
      :identity="identity"
      ref="bulkmodifyQuotation"
    ></bulkmodifyQuotation>
    <bulkhistorical ref="bulkhistorical" :ids="ids"></bulkhistorical>
  </basic-container>
</template>

<script>
import { getDetail } from "@/api/inquiry/carrierDialog";
import { updateDate, submitOA } from "@/api/inquiry/index";
import bulkmodifyQuotation from "./compenents/bulkmodifyQuotation.vue";
import bulkhistorical from "./compenents/bulkhistorical.vue";
import {
  getListManage,
  admingetListCarrier,
  getListCarrier,
  closeList,
  makesure,
} from "@/api/inquiry/domestictrade/index";
import { mapGetters } from "vuex";
export default {
  components: {
    bulkmodifyQuotation,
    bulkhistorical,
  },
  data() {
    return {
      query: {},
      form: {},
      data: [],
      identity: {},
      ids: {},
      modifyData: null,
      loading: false,
      buttonLoading: false,
      ranking: true,
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    option() {
      return {
        height: "auto",
        calcHeight: 30,
        align: "center",
        headerAlign: "center",
        index: this.ranking,
        indexLabel: "排名",
        border: true,
        searchLabelWidth: 120,
        searchMenuSpan: 6,
        menuWidth: 400,
        tip: false,
        viewBtn: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        editBtn: false,
        delBtn: false,
        labelWidth: 120,
        column: [
          {
            label: "承运商",
            prop: "carrierName",
          },
          {
            label: "≤1吨",
            prop: "quotedPrice1",
          },
          {
            label: "≤3吨",
            prop: "quotedPrice2",
          },
          {
            label: "≤5吨",
            prop: "quotedPrice3",
          },
          {
            label: "≤10吨",
            prop: "quotedPrice4",
          },
          {
            label: "≤15吨",
            prop: "quotedPrice5",
          },
          {
            label: "≤20吨",
            prop: "quotedPrice6",
          },
          {
            label: "≤25吨",
            prop: "quotedPrice7",
          },
          {
            label: "≤30吨",
            prop: "quotedPrice8",
          },
          {
            label: "状态",
            prop: "quotationStatus",
            display: false,
            hide: this.getpermission("showdatastatus"),
          },
        ],
      };
    },
    showSubmit() {
      let date = new Date().getTime();
      let endTime = new Date(this.form.endTime).getTime();
      return this.form.quoteStatus !== "finish" && date > endTime;
    },
  },
  methods: {
    getpermission(key, row) {
      switch (key) {
        case "closeBtn":
          return (
            this.permission.bulkcargo_close_offer_m &&
            row.quotationStatus != "已作废" &&
            row.quotationStatus != "已完成"
          );
        case "showdatastatus":
          return !this.permission.bulkcargo_domestictrade_detail_m;
        case "modifyBtn":
          return (
            this.permission.bulkcargo_modify_quotation_m &&
            this.ranking &&
            row.quotationStatus != "已作废" &&
            row.quotationStatus != "已完成" &&
            row.quotationStatus != "待报价"
          );
        case "confirmBtn":
          return (
            this.permission.bulkcargo_confirm_winning_m &&
            this.ranking &&
            row.quotationStatus != "已作废" &&
            row.quotationStatus != "已完成" &&
            row.quotationStatus != "待报价"
          );
        case "historicalBtn":
          return (
            this.permission.bulkcargo_historical_bargaining_m &&
            this.ranking &&
            row.quotationStatus != "待报价"
          );
        case "getofferBtn":
          return (
            this.permission.bulkcargo_get_bargaining &&
            row.quotationStatus != "已完成" &&
            row.quotationStatus != "已作废" &&
            row.isNotMy
          );
        case "modifyofferBtn":
          return (
            this.permission.bulkcargo_modify_bargaining &&
            row.quotationStatus != "已完成" &&
            row.quotationStatus != "已作废" &&
            row.isNotMy
          );
        case "historicalofferBtn":
          return (
            this.permission.bulkcargo_historical_bargaining &&
            row.isNotMy &&
            row.quotationStatus != "待报价"
          );
        default:
          break;
      }
      return true;
    },
    closelist(row) {
      this.loading = true;
      closeList({ id: row.id }).then(() => {
        this.$message.success("操作成功");
        this.tableonLoad();
      });
    },
    confirmwin(row) {
      this.loading = true;
      makesure({ id: row.id }).then(() => {
        this.$message.success("操作成功");
        this.tableonLoad();
      });
    },
    modifyquotation(row) {
      this.modifyData = row;
      this.identity = {
        showoff: { display: "none" },
      };
      this.$refs.bulkmodifyQuotation.open(row, {
        callback: (res) => {
          console.log(res);
          getListCarrier({ id: res.id, startId: res.id }, res).then(() => {
            this.$message.success("操作成功");
            this.$refs.bulkmodifyQuotation.close();
            this.tableonLoad();
          });
        },
      });
    },
    adminmodifyquotation(row) {
      this.modifyData = row;
      this.identity = {
        showoff: { display: "" },
      };
      this.$refs.bulkmodifyQuotation.open(row, {
        callback: (res) => {
          console.log(res);
          admingetListCarrier({ id: res.id, startId: res.id }, res).then(() => {
            this.$message.success("操作成功");
            this.$refs.bulkmodifyQuotation.close();
            this.tableonLoad();
          });
        },
      });
    },
    historicalquotation(row) {
      this.ids = {
        id: row.id,
      };
      this.$refs.bulkhistorical.open(row, {
        callback: (res) => {
          console.log(res);
        },
      });
    },
    tableonLoad(page, params = {}) {
      this.loading = true;
      getListManage(Object.assign(params, this.query)).then((res) => {
        this.loading = false;
        this.data = res.data.data;
        this.$refs.crud.doLayout();
      });
    },
    returnlast() {
      this.$router.$avueRouter.replace("/inquiry/bulkcargo/index");
    },
    onLoad(query) {
      getDetail(query).then((res) => {
        this.form = res.data.data;
        if (
          new Date().getTime() >= new Date(res.data.data.endTime).getTime()
            ? true
            : false
        ) {
          this.ranking = true;
          return;
        }
        this.ranking = false;
      });
    },
    // 修改询价响应日期和截止日期
    timeChange() {
      updateDate({
        id: this.form.id,
        endTime: this.form.endTime,
        effectiveTime: this.form.effectiveTime,
      })
        .then(({ data }) => {
          if (data.code === 200 && data.success) {
            this.$message.success(data.msg);
            this.onLoad(this.query);
          }
        })
        .catch(() => {
          this.onLoad(this.query);
        });
    },
    //提交OA
    submit() {
      this.buttonLoading = true;
      submitOA(this.form.id)
        .then(({ data }) => {
          if (data.code === 200 && data.success) {
            this.buttonLoading = false;
            this.$message.success(data.msg);
            this.onLoad(this.query);
          }
        })
        .catch(() => {
          this.buttonLoading = false;
        });
    },
  },
  created() {
    this.query = {
      id: this.$route.query.id,
    };
    this.onLoad(this.query);
  },
};
</script>

<style></style>
